<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我最爱的汽车投票</title>
    <style>
        h1{text-align:center}
        .login{text-align:right;margin-bottom: 20px}
        .row img{width:100%;}
        .img{position:relative}
        .img .row{position:absolute;bottom: 0;left:0px;background-color:rgba(0,0,0,0.5);width:100%;color: white;margin:0}
        p{margin:10px 0 !important}
        .padding{padding:8px 0}
        .hide{display:none}
        .pic{border-radius: 50%;width:50px;height:50px;margin-right: 10px}
    </style>
</head>
<body>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.0.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<?php
include_once "conn.php";
$sql = "select * from carInfo order by id desc";
$result = mysqli_query($conn,$sql);
?>
<script src="layer/layer.js"></script>
<div class="container">
    <h1>我最爱的汽车投票</h1>
    <p class="login">
        <img class="pic hide" id="showPIC" src="">
        <a href="javascript:showLayer(1)">登录</a> <a href="javascript:showLayer(2)">注册</a> <a id="logout" class="hide" href="logout.php">注销</a> <a id="admin" class="hide" href="admin.php">后台管理</a></p>
    <div class="row">
        <?php
        $i = 1;
        while($info = mysqli_fetch_array($result)){
        ?>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="img">
                <a href="javascript:vote(<?php echo $info['id'];?>,'num<?php echo $info['id'];?>');"><img src="img/<?php echo $info['carPic'];?>"></a>
                <div class="row">
                    <div class="col-xs-12 col-sm-7 col-md-6 padding"><?php echo $info['carName'];?></div>
                    <div class="col-xs-12 col-sm-5 col-md-6 padding">当前票数：<span id="num<?php echo $info['id'];?>"><?php echo $info['carNum'];?></span></div>
                </div>
            </div>
            <p><?php echo $info['carDesc'];?></p>
        </div>
            <!--根据情况，考虑清理浮动-->
            <!--如果是sm，则2列清理。如果是md，则3列清理，如果是lg，则4列清理-->
        <?php
            if($i % 2 == 0){
                //在此清理浮动
                ?>
                <div class="clearfix visible-sm-block"></div>
        <?php
            }
            if($i % 3 == 0){
                //在此清理浮动
                ?>
                <div class="clearfix visible-md-block"></div>
        <?php
            }
            if($i % 4 == 0){
                //在此清理浮动
                ?>
                <div class="clearfix visible-lg-block"></div>
        <?php
            }
            $i++;
        }
        ?>
    </div>
</div>
<script>
    $(function(){
        checkLoginStatus();
        //判断是不是从注销页面过来的。如果是，则自动弹出登录窗口
        <?php
        if(isset($_GET['source']) and $_GET['source'] == 'logout'){
            //说明是注销回来的。
            //接下来调用js打开弹窗
            ?>
        showLayer(1);
    <?php
        }
        ?>
    })
    function showAdmin(type){
        if(type == 1){
            $("#admin").removeClass('hide');
        }
        else{
            $("#admin").addClass('hide');
        }
    }
    function vote(carID,numID){
        $.ajax({
            type:'post',
            url:'ajaxVote.php',
            data:{
                carID:carID
            },
            dataType:'json',
            success:function(data){
                if(data.code == -3){
                    layer.msg(data.errMsg + "<br>解封时间为：" + data.expires);
                }
                else if(data.code == -1){
                    alert(data.errMsg);
                }
                else if(data.code == -2){
                    //说明未登录
                    alert(data.errMsg);
                    //显示登录框
                    showLayer(1);
                }
                else{
                    //投票成功，更新当前票数
                    layer.msg('投票成功');
                    let currentNum = parseInt($("#" + numID).text());
                    $("#" + numID).text(currentNum + 1);
                }
            },
            error:function(data){
                alert('网络错误');
            }
        })
    }
    function checkLoginStatus(){
        //检查当前是否处于登录状态
        //如果是登录状态，则显示注销链接，则显示头像
        $.ajax({
            url:'checkLoginStatus.php',
            dataType:'json',
            success: function(d){
                if(d.code == 1){
                    showLogout();
                    showPic(d.pic,d.username);
                }
            }
        })
    }
    function showPic(pic,username){
        $("#showPIC").attr('src','pic/'+pic).attr('title',username);
        $("#showPIC").removeClass('hide');
    }
    function showLogin(){
        layer.open({
            type: 2,
            area: ['600px', '450px'],
            fixed: false, //不固定
            maxmin: false,
            content: 'login.php'
        });
    }
    function showLayer(type){
        //type为1表示打开登录页面。type为2表示打开注册页面
        let url = '';
        if(type == 1){
            url = 'login.php';
        }
        else{
            url = 'register.php';
        }
        layer.open({
            type: 2,
            area: ['600px', '450px'],
            fixed: false, //不固定
            maxmin: false,
            content: url
        });
    }
    function showLogout(){
        //alert(1)
        $("#logout").removeClass('hide');
    }
    function closeLayer(){
        layer.closeAll();
    }
</script>
</body>
</html>